	<style type="text/css">
		.title{
			margin-bottom:10px;
		}
		.dragitem{
			border:1px solid #ccc;
			width:50px;
			height:50px;
			margin-bottom:10px;
		}
		.targetarea{
			border:1px solid red;
			height:150px;
		}
		.proxy{
			border:1px solid #ccc;
			width:80px;
			background:#fafafa;
		}
	</style>
	<script>
		$(function(){
			$('.dragitem').draggable({
				revert:true,
				deltaX:10,
				deltaY:10,
				proxy:function(source){
					var n = $('<div class="proxy"></div>');
					n.html($(source).html()).appendTo('body');
					return n;
				}
			});
		});
	</script>
	<h1>拖放 - DragDrop</h1>
	<div style="float:left;width:200px;margin-right:20px;">
	  <div class="title">Source</div>
		<div>
			<div class="dragitem">Apple</div>
			<div class="dragitem">Peach</div>
			<div class="dragitem">Orange</div>
		</div>
	</div>
	<div style="float:left;width:200px;">
		<div class="title">Target</div>
		<div class="easyui-droppable targetarea"
				data-options="
					accept: '.dragitem',
					onDragEnter:function(e,source){
						$(this).html('enter');
					},
					onDragLeave: function(e,source){
						$(this).html('leave');
					},
					onDrop: function(e,source){
						$(this).html($(source).html() + ' dropped');
					}
				">
		</div>
	</div>
    <p>
<h3>&nbsp;</h3>
<h3>&nbsp;</h3>
<h3>&nbsp;</h3>
<h3>&nbsp;</h3>
<h3>&nbsp;</h3>
<h3>&nbsp;</h3>
<h3>&nbsp;</h3>
<h3>页面代码： </h3>
</p>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;title&gt;jQuery EasyUI&lt;/title&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;style type=&quot;text/css&quot;&gt;
		.title{
			margin-bottom:10px;
		}
		.dragitem{
			border:1px solid #ccc;
			width:50px;
			height:50px;
			margin-bottom:10px;
		}
		.targetarea{
			border:1px solid red;
			height:150px;
		}
		.proxy{
			border:1px solid #ccc;
			width:80px;
			background:#fafafa;
		}
	&lt;/style&gt;
	&lt;script&gt;
		$(function(){
			$('.dragitem').draggable({
				revert:true,
				deltaX:10,
				deltaY:10,
				proxy:function(source){
					var n = $('&lt;div class=&quot;proxy&quot;&gt;&lt;/div&gt;');
					n.html($(source).html()).appendTo('body');
					return n;
				}
			});
		});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h1&gt;拖放 - DragDrop&lt;/h1&gt;
	&lt;div style=&quot;float:left;width:200px;margin-right:20px;&quot;&gt;
	  &lt;div class=&quot;title&quot;&gt;Source&lt;/div&gt;
		&lt;div&gt;
			&lt;div class=&quot;dragitem&quot;&gt;Apple&lt;/div&gt;
			&lt;div class=&quot;dragitem&quot;&gt;Peach&lt;/div&gt;
			&lt;div class=&quot;dragitem&quot;&gt;Orange&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div style=&quot;float:left;width:200px;&quot;&gt;
		&lt;div class=&quot;title&quot;&gt;Target&lt;/div&gt;
		&lt;div class=&quot;easyui-droppable targetarea&quot;
				data-options=&quot;
					accept: '.dragitem',
					onDragEnter:function(e,source){
						$(this).html('enter');
					},
					onDragLeave: function(e,source){
						$(this).html('leave');
					},
					onDrop: function(e,source){
						$(this).html($(source).html() + ' dropped');
					}
				&quot;&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>
